<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div id="mydiv">我是div</div> -->
    <div class="container">
        <div class="myclass">我是div111</div>
        <div class="myclass">我是div222</div>
        <p>我是段落</p>
        <span>我是span</span>
    </div>
    <div>我是container之外的div</div>
   
    <script>
        // 一.dom : d: document 文档  。 o： object ：对象 。  m ：model ：模型
        // m ：model 模型  m ： module 模块
        // 操作dom 浏览器提供一个 全局的对象 doucument 
        // window ---> doucument ---> html ---> body ....

        // 二.操作文档（doucument）
            /* 
                添加标签（tag）（元素：element）
                修改或者替换元素 
                删除元素
                查找元素,获取元素
            */
        // 获取元素 ：第一步 获取元素。第二步，再获取元素的基础上在操作元素
        // 1.获取元素 
        //（1） 通过 id 获取元素标签 ；
        // var ele =  document.getElementById("mydiv"); // 获取一个id名为 mydiv的元素标签
        // console.log(ele);
        //注意： id 获取元素 可以 直接写id （了解 用的不多 ）;
        // console.log(mydiv);

        // （2） 通过类名获取元素标签
            // var eles =  document.getElementsByClassName("myclass");
        // get ：获取   element 元素   by 通过  className 类名
        // console.log(eles);  // 是一个伪数组 ，类数组；
        // var arr = [1,2];
        // console.log(arr);

        // (3) 通过标签名称获取元素
        // var eles =  document.getElementsByTagName("div");
        // console.log(eles);

        // （4） 改变获取的范围 ；
        // 获取获取的范围 
        var  containerEle = document.getElementsByClassName("container")[0];
        // console.log(containerEle)
        var eles =  containerEle.getElementsByTagName("div");
        console.log(eles);
        // 1.写一遍  2. 有一个ul 3个 li 标签 ，获取3个li 改变li里的内容


    </script>
</body>
</html>